The ::first-line pseudo-element in CSS allows you to style only the first line of a block-level element. This is helpful for adding emphasis, decorative effects, or visual hierarchy to the start of a paragraph.

Key Points

1
::first-line targets only the first rendered line of text within a block element.
2
It can be styled with text-related properties such as color, font-size, font-weight, letter-spacing, and word-spacing.
3
It works exclusively on block-level elements like <p>, <div>, or <section>.
4
It cannot insert content; it only modifies the appearance of the existing text.

Example: Applying Styles to the First Line

Here, only the first line of the paragraph is styled differently, providing emphasis while the rest of the paragraph remains normal.

Best Practices

1
Use ::first-line to highlight or emphasize the start of paragraphs.
2
Stick to text-related CSS properties for consistent results.
3
Consider responsive layouts, as the first line may wrap differently on various screen sizes.
4
Combine with ::first-letter for advanced typographic effects.

Difficulty: 3/10

Topics: first-line styling, CSS pseudo-elements, line-height inheritance

Scenario Questions

0-2 years experience

1
How would you make the first line of a paragraph red and bold using CSS?
2
What happens if you try to set margin-top on ::first-line? Why?

2-5 years experience

1
A designer says the first line of all article paragraphs should be italicized, but it’s not working on mobile — what would you check?
2
We’re seeing inconsistent first-line styling across browsers in our blog component — how would you debug and fix this?

5-8 years experience

1
We’re building a rich-text editor where users can style the first line of paragraphs — how would you implement this reliably without breaking layout or performance on long-form content?
2
How would you handle first-line styling in a component that dynamically switches between block and inline-display based on screen size?

8+ years experience

1
Our content platform has legacy CSS that uses JavaScript to simulate first-line styling — how would you migrate to native CSS ::first-line without breaking existing layouts or accessibility?
2
When designing a global typography system, how do you balance the use of ::first-line with accessibility, performance, and internationalization concerns across 50+ languages?

Follow-up Questions

❓What happens if you apply margin or padding to ::first-line?
❓Why won't this work if the paragraph is inside a flex container?
❓How would you test this across mobile and desktop breakpoints?